<!--
 * @Author: your name
 * @Date: 2021-01-10 12:55:05
 * @LastEditTime: 2021-01-14 15:53:22
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \shopping\src\pages\order\main.vue
-->
<template>
  <view>
    <Tabs :tabsList="tabsList" @change="changeIndex" />

    <view class="order_list">
      <view class="order_item" v-for="item in orderList" :key="item.order_id">
        <view class="item"
          ><text class="item_left">订单编号</text
          ><text>{{ item.order_number }}</text></view
        >
        <view class="item"
          ><text class="item_left">订单金额</text
          ><text class="price">{{ item.total_price }}</text></view
        >
        <view class="item"
          ><text class="item_left">订单日期</text
          ><text>{{ item.update_time | changeDate }}</text></view
        >
      </view>
    </view>
  </view>
</template>

<script>
import Tabs from "@/components/tabs";
import { getOrders } from "@/api";
export default {
  components: {
    Tabs,
  },
  data() {
    return {
      tabsList: [
        { id: 1, type: 1, text: "全部" },
        { id: 2, type: 2, text: "待付款" },
        { id: 3, type: 3, text: "待收货" },
      ],
      orderList: [],
      type: 1,
    };
  },
  onLoad() {
    this.getOrders();
  },
  filters: {
    changeDate(value) {

      // 后端返回的时间戳 只精确到秒  转为时*1000 将值转为毫秒
      const date = new Date(value * 1000);
      const y = date.getFullYear();
      const m = date.getMonth() + 1;
      const d = date.getDate();
      const hh = date.getHours();
      const mm = date.getMinutes();
      const ss = date.getSeconds();


      return y+"-"+m+"-"+d+"  "+hh+":"+mm+":"+ss ;
    },
  },
  methods: {
    async getOrders() {
      const res = await getOrders({ type: this.type });
      this.orderList = res.data.message.orders;
      // console.log(res);
    },
    changeIndex(index) {
      const type = this.tabsList[index].type;
      this.type = type;
      this.getOrders({ type });
    },
  },
};
</script>

<style lang="less" scoped>
.order_list {
  .order_item {
    display: flex;
    flex-wrap: wrap;
    align-content: space-evenly;
    height: 250rpx;
    padding: 0 32rpx;
    border-bottom: 1px solid #ccc;
    .item {
      display: flex;
      width: 100%;
      justify-content: space-between;
      text {
        font-size: 30rpx;
      }
      .item_left {
        color: #898989;
      }
    }
  }
}
</style>